<template>
  <div class="palace-container">
    <table class="palace-table">
      <tbody>
       

        
        <!-- 宫位行 -->
        <tr class="palace-row">
          <td 
            v-for="(pillar, index) in pillars" 
            :key="`palace-${index}`"
            class="palace-cell"
          >
            <div class="palace-label-text">{{ getPalaceName1(index) }}</div>
          </td>
        </tr>
        <tr class="palace-row">
          <td 
            v-for="(pillar, index) in pillars" 
            :key="`palace-${index}`"
            class="palace-cell"
          >
            <div class="palace-label-text">{{ getPalaceName2(index) }}</div>
          </td>
        </tr>
        <tr class="palace-row">
          <td 
            v-for="(pillar, index) in pillars" 
            :key="`palace-${index}`"
            class="palace-cell"
          >
            <div class="palace-label-text">{{ getPalaceName(index) }}</div>
          </td>
        </tr>

        <!-- 柱标题行 -->
        <tr class="palace-row">
          <td 
            v-for="(pillar, index) in pillars" 
            :key="`title-${index}`"
            class="palace-cell palace-title"
          >
            {{ pillar.label || getPillarLabel(index) }}
          </td>
        </tr>

        <!-- 天干行 -->
        <tr class="palace-row">
          <td 
            v-for="(pillar, index) in pillars" 
            :key="`gan-${index}`"
            class="palace-cell palace-gan"
          >
            <div class="ganzhi-wrapper" :style="{ color: pillar.gan ? getTianganColor(pillar.gan) : '' }">
              <span class="ganzhi-text">{{ pillar.gan }}</span>
            </div>
          </td>
        </tr>

        <!-- 地支行 -->
        <tr class="palace-row">
          <td 
            v-for="(pillar, index) in pillars" 
            :key="`zhi-${index}`"
            class="palace-cell palace-zhi"
          >
            <div class="ganzhi-wrapper" :style="{ color: pillar.zhi ? getDizhiColor(pillar.zhi) : '' }">
              <span class="ganzhi-text">{{ pillar.zhi }}</span>
            </div>
          </td>
        </tr>

        <!-- 十神行 -->
        <tr class="palace-row">
          <td 
            v-for="(pillar, index) in pillars" 
            :key="`tenshen-${index}`"
            class="palace-cell palace-tenshen"
          >
            <div class="tenshen-text">{{ pillar.tenStar || '' }}</div>
          </td>
        </tr>

        <!-- 时间类象标题行 -->
        <tr class="palace-row">
          <td class="palace-cell class-title-cell" colspan="4">
            <div class="class-title">时间类象</div>
          </td>
        </tr>

        <!-- 时间类象内容行 -->
        <tr class="palace-row">
          <td 
            v-for="(item, index) in timeClass" 
            :key="`time-${index}`"
            class="palace-cell class-content-cell"
          >
            <div class="class-item">
              <div class="class-item-title">{{ item.title }}</div>
              <div class="class-item-subtitle">{{ item.subtitle }}</div>
            </div>
          </td>
        </tr>

        <!-- 空间类象标题行 -->
        <tr class="palace-row">
          <td class="palace-cell class-title-cell" colspan="4">
            <div class="class-title">空间类象</div>
          </td>
        </tr>

        <!-- 空间类象内容行 -->
        <tr class="palace-row">
          <td 
            v-for="(item, index) in spaceClass" 
            :key="`space-${index}`"
            class="palace-cell class-content-cell"
          >
            <div class="class-item">
              <div class="class-item-title">{{ item.title }}</div>
              <div v-if="item.subtitle" class="class-item-subtitle">{{ item.subtitle }}</div>
            </div>
          </td>
        </tr>

        <!-- 身体类象标题行 -->
        <tr class="palace-row">
          <td class="palace-cell class-title-cell" colspan="4">
            <div class="class-title">身体类象</div>
          </td>
        </tr>

        <!-- 身体类象内容行 -->
        <tr class="palace-row">
          <td 
            v-for="(item, index) in bodyClass" 
            :key="`body-${index}`"
            class="palace-cell class-content-cell"
          >
            <div class="class-item">
              <div class="class-item-title">{{ item.title }}</div>
              <div v-if="item.subtitle" class="class-item-subtitle">{{ item.subtitle }}</div>
            </div>
          </td>
        </tr>

        <!-- 人际类象标题行 -->
        <tr class="palace-row">
          <td class="palace-cell class-title-cell" colspan="4">
            <div class="class-title">人际类象</div>
          </td>
        </tr>

        <!-- 人际类象内容行 -->
        <tr class="palace-row">
          <td 
            v-for="(item, index) in interpersonalClass" 
            :key="`interpersonal-${index}`"
            class="palace-cell class-content-cell"
          >
            <div class="class-item">
              <div class="class-item-title">{{ item.title }}</div>
              <div v-if="item.subtitle" class="class-item-subtitle">{{ item.subtitle }}</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { getTianganColor, getDizhiColor, getWuxing } from '@/utils/wuxing'

interface Pillar {
  gan: string
  zhi: string
  label?: string
  zhiLabel?: string
  tenStar?: string
}

interface Props {
  pillars: Pillar[]
}

const props = defineProps<Props>()

// 宫位名称映射
const PALACE_NAMES = ['祖辈宫', '兄弟宫', '夫妻宫', '子女宫']

// 柱标题映射
const PILLAR_LABELS = ['年柱', '月柱', '日柱', '时柱']

// 宫位标题行第一个标签映射（对应年柱、月柱、日柱、时柱）
const HEADER_LABEL_1 = ['', '事业宫', '', '']

// 宫位标题行第二个标签映射（对应年柱、月柱、日柱、时柱）
const HEADER_LABEL_2 = ['', '父母宫', '', '']

const getPalaceName1 = (index: number): string => {
  return HEADER_LABEL_1[index] || ''
}
const getPalaceName2 = (index: number): string => {
  return HEADER_LABEL_2[index] || ''
}
// 获取宫位名称
const getPalaceName = (index: number): string => {
  return PALACE_NAMES[index] || ''
}

// 获取柱标题
const getPillarLabel = (index: number): string => {
  return PILLAR_LABELS[index] || `柱${index + 1}`
}

// 获取宫位标题行第一个标签
const getHeaderLabel1 = (index: number): string => {
  return HEADER_LABEL_1[index] || ''
}

// 获取宫位标题行第二个标签
const getHeaderLabel2 = (index: number): string => {
  return HEADER_LABEL_2[index] || ''
}

// 五行图标映射
const wuxingIcons: Record<string, string> = {
  '木': new URL('../assets/wuxing/icon_wx_mu.png', import.meta.url).href,
  '火': new URL('../assets/wuxing/icon_wx_huo.png', import.meta.url).href,
  '土': new URL('../assets/wuxing/icon_wx_tu.png', import.meta.url).href,
  '金': new URL('../assets/wuxing/icon_wx_jin.png', import.meta.url).href,
  '水': new URL('../assets/wuxing/icon_wx_shui.png', import.meta.url).href
}

// 获取五行图标
const getWuxingIcon = (ganzhi: string): string | undefined => {
  const wuxing = getWuxing(ganzhi)
  return wuxing ? (wuxingIcons[wuxing] || undefined) : undefined
}

// 时间类象数据
const timeClass = computed(() => [
  { title: '少年', subtitle: '1~18岁' },
  { title: '青年', subtitle: '18~36岁' },
  { title: '中年', subtitle: '36~48岁' },
  { title: '晚年', subtitle: '48岁往后' }
])

// 空间类象数据
const spaceClass = computed(() => [
  { title: '远方' },
  { title: '家乡' },
  { title: '住所', subtitle: '工作场所' },
  { title: '门户', subtitle: '房子附近' }
])

// 身体类象数据
const bodyClass = computed(() => [
  { title: '头部', subtitle: '颈部' },
  { title: '胸部', subtitle: '脊柱、肩背' },
  { title: '腹部', subtitle: '心脑、内脏' },
  { title: '下肢', subtitle: '泌尿系统' }
])

// 人际类象数据
const interpersonalClass = computed(() => [
  { title: '外人', subtitle: '长辈' },
  { title: '同事', subtitle: '领导' },
  { title: '至亲之人' },
  { title: '晚辈', subtitle: '学生' }
])
</script>

<style scoped>
.palace-container {
  width: 100%;
  background: #fff;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.palace-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
}

.palace-table tbody {
  width: 100%;
  padding: 0;
  margin: 0;
}

.palace-row {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* 所有单元格基础样式 */
.palace-table td {
  padding: 4px 0;
  margin: 0;
  text-align: center;
  vertical-align: top;
  border: none;
  width: 25%;
  box-sizing: border-box;
  font-size: 14px;
}

.palace-header-labels {
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
}

.palace-header-label {
  display: block;
  font-size: 14px;
  color: #000;
  font-weight: 500;
  line-height: 1.4;
  padding: 0;
  margin: 0;
}

.palace-label-text {
  font-size: 14px;
  color: #000;
  font-weight: 500;
  line-height: 1.4;
  padding: 0;
  margin: 0;
}

.palace-title {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 500;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

.palace-gan,
.palace-zhi {
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

.ganzhi-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.wuxing-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.ganzhi-text {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}

.palace-tenshen {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

.tenshen-text {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.4;
  padding: 0;
  margin: 0;
}

.class-title-cell {
  padding: 12px 0;
 
}

.class-title {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  padding: 0;
  margin-top: 20px;
}

.class-content-cell {
  text-align: left;
  vertical-align: top;
  padding: 8px 0;
  margin: 0;
}

.class-item {
  display: block;
  padding: 0;
  margin: 0;
}

.class-item-title {
  font-size: 14px;
  color: #000;
  font-weight: 500;
  line-height: 1.4;
  padding: 0;
  margin: 0 0 4px 0;
}

.class-item-subtitle {
  font-size: 14px;
  color: #64748b;
  font-weight: 400;
  line-height: 1.4;
  padding: 0;
  margin: 0;
}
</style>
